<template>
  <div style="background-color: #f7f7f7">
    <login-header rightText="欢迎注册~"></login-header>
    <div class="register-wrapper">
      <div class="tabs">
        <div
          v-for="(item, index) in tabList"
          :key="index"
          :class="{ active: currentIndex === index }"
          class="tab flex-column-x-center"
          @click="toggleTab(index)"
        >
          <span>{{ item }}</span>
          <div
            class="underline"
            :style="{ visibility: currentIndex === index ? '' : 'hidden' }"
          ></div>
        </div>
      </div>
      <el-form ref="form" label-width="140px" :rules="rules" :model="form">
        <el-form-item label="手机号：" prop="phone">
          <el-input
            type="text"
            v-model="form.phone"
            placeholder="请输入手机号"
          ></el-input>
        </el-form-item>
        <el-form-item label="验证码：" prop="code">
          <div class="flex-y-center sms-code-wrapper">
            <el-input
              style="flex: 1"
              type="text"
              v-model="form.code"
              placeholder="请输入验证码"
            ></el-input>
            <div class="send-code-btn" :class="{ disabled: timer }" @click="sendSms">
              {{ timer ? countdown + "s后重发" : "获取验证码" }}
            </div>
          </div>
        </el-form-item>
        <el-form-item label="密码：" prop="password">
          <el-input
            type="password"
            v-model="form.password"
            placeholder="请输入密码"
            :show-password="true"
          ></el-input>
        </el-form-item>
        <el-form-item label="确认密码：" prop="verifyPassword">
          <el-input
            type="password"
            v-model="form.verifyPassword"
            placeholder="请输入确认密码"
            :show-password="true"
          ></el-input>
        </el-form-item>
        <el-form-item label="联系人姓名：" prop="contactName" v-if="currentIndex == 0">
          <el-input
            type="text"
            v-model="form.contactName"
            placeholder="请输入联系人姓名"
          ></el-input>
        </el-form-item>
        <el-form-item label="企业名称：" prop="firmName" v-if="currentIndex == 0">
          <el-input
            type="text"
            v-model="form.firmName"
            placeholder="请输入企业名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="企业类型：" prop="firmType" v-if="currentIndex == 0">
          <el-select
            v-model="form.firmType"
            placeholder="请选择"
            :popper-append-to-body="false"
          >
         
            <el-option
              v-for="item in firmTypeArr"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="营业执照："
          prop="businessLicense"
          style="margin-bottom: 20px"
          v-if="currentIndex == 0"
        >
          <ImageUpload
            :imgSrc="require('@/assets/img/icon-upload-1.png')"
            v-model="form.businessLicense"
          ></ImageUpload>
        </el-form-item>

        <div
          class="remerber-pwd flex-y-center"
          style="margin-left: 130px; align-self: flex-start"
          @click="toggleRemerber"
        >
          <img
            :src="require(`@/assets/img/icon-radio-${isAgree ? '1' : '0'}.png`)"
            class="icon-radio"
            alt=""
          />
          <router-link class="agreement" to="/richText">
            <span>注册协议</span>
          </router-link>
        </div>
      </el-form>
      <el-button type="primary" class="submit-btn" @click="submit">提交</el-button>
    </div>
    <page-footer></page-footer>
  </div>
</template>

<script>
import LoginHeader from "@/components/LoginHeader.vue";
import PageFooter from "@/components/PageFooter.vue";
import SubmitBtn from "@/components/SubmitBtn.vue";
import { register } from "@/api/user";
import { sendSmsCode } from "@/api/common.js";
import { firmType, const2Arr } from "@/consts/index.js";
export default {
  name: "Register",
  components: {
    LoginHeader,
    PageFooter,
    SubmitBtn,
  },
  data() {
    return {
      tabList: ["企业账号注册", "个人账号注册"],
      currentIndex: 0,
      rules: {
        phone: [
          { required: true, message: "手机号不能为空", trigger: "blur" },
          {
            pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
            message: "请输入正确的手机号",
            trigger: "blur",
          },
        ],
        password: [{ required: true, message: "密码不能为空", trigger: "blur" }],
        code: [{ required: true, message: "验证码不能为空", trigger: "blur" }],
        verifyPassword: [
          { required: true, message: "确认密码不能为空", trigger: "blur" },
        ],
        contactName: [{ required: true, message: "联系人名称不能为空", trigger: "blur" }],
        firmName: [{ required: true, message: "企业名称不能为空", trigger: "blur" }],
        firmType: [{ required: true, message: "企业类型不能为空", trigger: "blur" }],
        businessLicense: [
          { required: true, message: "营业执照不能为空", trigger: "blur" },
        ],
      },
      form: {
        phone: "",
        code: "",
        password: "",
        verifyPassword: "",
        contactName: "",
        firmName: "",
        firmType: "",
        type: 2, // 企业注册
        businessLicense: "",
        identity: 2,
      },
      imageList: [],
      countdown: 59,
      timer: "",
      firmType,
      firmTypeArr: const2Arr(firmType),
      isAgree: false,
    };
  },
  methods: {
    toggleTab(index) {
      this.currentIndex = index;
      this.form.identity = index == 0 ? 2 : 1;
      this.form.type = index == 0 ? 2 : 1;
    },
    sendSms() {
      this.$refs.form.validateField("phone", (valid) => {
        if (valid) return;
        if (this.timer) return;
        sendSmsCode({
          phone: this.form.phone,
          use: 1, 
        }).then((res) => {
          this.$modal.msgSuccess("验证码发送成功");
          this.timer = setInterval(() => {
            this.countdown--;
            if (this.countdown < 1) {
              clearInterval(this.timer);
              this.timer = "";
              this.countdown = 59;
            }
          }, 1000);
        });
      });
    },
    toggleRemerber() {
      this.isAgree = !this.isAgree;
    },
    submit() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (this.form.password !== this.form.verifyPassword) {
            return this.$modal.msgError("两次输入密码不一致");
          }
          if (!this.isAgree) {
            return this.$modal.msgError("请阅读并同意《注册协议》");
          }
          register(this.form).then((res) => {
            this.$modal.msgSuccess("注册成功，请前往登录");
            setTimeout(() => {
              this.$router.push('/login')
            }, 800);
          });
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.register-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 1200px;
  background: #ffffff;
  border-radius: 0px;
  padding: 60px 0;
  margin: 60px auto;

  .tabs {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 30px;

    .tab {
      padding: 0 60px;
      font-weight: 400;
      font-size: 22px;
      color: #333333;
      cursor: pointer;
    }

    .active {
      font-weight: bold;
      font-size: 22px;
      color: #fe5a13;
    }

    .underline {
      width: 40px;
      height: 6px;
      background: #fe5a13;
      border-radius: 3px;
      margin-top: 20px;
    }
  }
}

.sms-code-wrapper {
  width: 550px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;

  ::v-deep .el-input__inner {
    position: relative;
    z-index: 10075;
    width: 350px;
    border-color: transparent !important;
    border: 0;
    border-radius: 0;
  }
  &:has(.el-input__inner:focus) {
    border-color: #fe5a13;
  }

  .send-code-btn {
    display: flex;
    align-items: center;
    height: 30px;
    font-weight: 400;
    font-size: 18px;
    color: #fe5a13;
    padding: 0rem 30px;
    border-left: 1px solid #ccc;
    cursor: pointer;
  }
}

.remerber-pwd {
  cursor: pointer;
  margin-left: 130px;

  .icon-radio {
    position: relative;
    top: 2px;
    width: 20px;
    height: 20px;
    margin-right: 12px;
  }

  .agreement:hover {
    text-decoration: underline;
    color: #808080;
  }

  span {
    font-weight: 400;
    font-size: 16px;
    color: #808080;
  }
}

::v-deep .el-form-item__label {
  line-height: 56px;
  font-size: 18px;
  width: 120px;
}

// 设置文本框长度
::v-deep .el-input__inner {
  width: 548px;
  height: 56px;
  font-size: 18px;
}

// 上传图片占位图的尺寸
::v-deep .el-upload--picture-card {
  width: 200px;
  height: 130px;
}

::v-deep .el-select-dropdown__item {
  font-size: 16px;
}

.submit-btn {
  width: 548px;
  height: 60px;
  border-radius: 10px;
  margin: 70px 0 30px 0;
  font-size: 20px;
}
</style>
